<!--  -->
<template>
  <div class=''>
    <a-skeleton
      :loading="loading"
      active
    >
      <div
        class="forlist"
        v-for="item in postList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <div class="listItem">
          <a-avatar
            shape="square"
            :size="64"
            icon="user"
            :src="item.avator"
          />
          <div class="content">
            <div class="title">{{item.title}}</div>
            <div class="info">
              <div class="left_info">
                <a-icon type="meh" />
                <div class="interval name">{{item.name}}</div>
                <a-icon type="message" />
                <div class="interval">{{item.comments}}</div>
                <a-icon type="eye" />
                <div class="interval">{{item.pv}}</div>
              </div>
              <div>{{item.moment}}</div>
            </div>
          </div>
        </div>
        <a-divider class="divider" />
      </div>
      <a-empty
        class="empty"
        v-if="postList.length == 0"
      />
      <div v-show="loadingShow">
        <a-spin tip="Loading...">
          <div class="spin-content">
            容我去取一下大神们的文章...
          </div>
        </a-spin>
      </div>
      <div
        v-show="nothing"
        class="nothing"
      >
        好像没有了呢...
      </div>
      <a-back-top>
        <div class="ant-back-top-inner">
        </div>
      </a-back-top>
    </a-skeleton>
  </div>
</template>

<script>
import * as api from "@/API/require"
export default {
  components: {},
  data () {
    return {
      loading: true,
      postList: [],
      count: 0,//总条数
      loadingShow: false,
      nothing: false,//没有了
      page: 1,
      getMessage: '容我去取一下大神们的文章...'
    };
  },
  computed: {},
  watch: {},
  methods: {
    async postsSelfPage (page) {
      await api.postsSelfPage({
        page: page,
        uid: JSON.parse(localStorage.getItem('userInfo')).id
      }).then(res => {
        this.postList = [...this.postList, ...res.data.result]
        this.count = res.data.count
        this.loadingShow = false
      })
    },
    goDetail (id) {
      this.$router.push({ name: 'post_detail', params: { id: id } })
    },

  },
  created () {

  },
  mounted () {
    this.postsSelfPage(1).then(()=>{this.loading = false})
    let that = this
    window.onscroll = function() {
      //文档内容实际高度（包括超出视窗的溢出部分）
      var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
      //滚动条滚动距离
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      //窗口可视范围高度
      var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
      //判断还有没有
      if (that.page < Math.ceil(that.count / 10)) {
        if (clientHeight + scrollTop >= scrollHeight) {
          that.loadingShow = true
          that.postsSelfPage(that.page += 1)
        }
      } else {
        that.nothing = true
      }

    }
  },
}
</script>
<style lang="less" scoped>
.main {
  background-color: #fff;
  margin: 10px auto 0;
  padding: 15px 3.5vw;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  border-radius: 2px;
}
.forlist {
  padding: 24px 20px 0 20px;
  .divider {
    margin: 24px 0 0 0;
  }
  &:hover {
    cursor: pointer;
    background-color: #eeeeee;
  }
}
.listItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 64px;
  .content {
    flex: 1;
    height: 100%;
    margin-left: 20px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left_info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .name {
          display: inline-block;
          vertical-align: top;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .interval {
          margin: 0 10px 0 4px;
        }
      }
    }
  }
}
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
.nothing {
  padding: 20px;
  text-align: center;
}
.ant-back-top {
  width: 10vw;
  height: 10vw;
  right: 0;
  .ant-back-top-inner {
    height: 10vw;
    width: 10vw;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../../../public/backtop.png);
    line-height: 100px;
    border-radius: 4px;
    // color: #fff;
    text-align: center;
    font-size: 20px;
  }
}
.empty {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>